<template>
  <div class="square-wrap">
    <title-bar title="歌单广场"></title-bar>
    <div class="square-content">
      <keep-alive>
        <tab-swiper :tags="tags" @handleTabClicked="switchTag"></tab-swiper>
      </keep-alive>
      <div class="square-list-wrap" ref="squarewrapRef">
        <scroll
          class="scroll-content"
          :data="SquareList"
          :pullup="pullup"
          @scrollToEnd="loadMoreList"
          ref="squareListRef"
        >
          <div class="scroll-content-inner">
            <keep-alive>
              <Swiper-trojan
                :trojan="Trojan"
                v-show="Trojan.length"
                @handleClick="seletItem"
                v-if="currentTagName==='推荐'"
              ></Swiper-trojan>
            </keep-alive>
            <van-loading
              v-show="isLoading"
              type="circular"
              color="#fff"
              vertical
            >加载{{this.currentTagName}}歌单中...</van-loading>
            <square-list :squarelist="SquareList" v-show="SquareList.length>0" :more="more"></square-list>
          </div>
        </scroll>
      </div>
    </div>
  </div>
</template>

<script>
import TitleBar from "@/base/title-bar/title-bar";
import TabSwiper from "@/components/tab/tab_swiper.vue";
import {
  getCatList,
  getHotcatList,
  getRecommend,
  gethighquality,
  getSquareList
} from "@/request/api";
import { createSquareTag } from "@/common/square";
import SwiperTrojan from "@/components/swiper/swiperTrojan/Trojan";
import { mapMutations } from "vuex";
import SquareList from "@/components/square-list/square-list";
import Scroll from "@/base/scroll/scroll";
import { playListMixin } from "@/common/mixin.js";
export default {
  mixins: [playListMixin],
  components: {
    TitleBar,
    TabSwiper,
    SwiperTrojan,
    SquareList,
    Scroll
  },
  data() {
    return {
      tags: [],
      currentTagName: "推荐",
      offset: 0,
      recommendData: [],
      Trojan: [],
      // 歌单的列表：
      pullup: true,
      isLoading: false,
      SquareList: [],
      limit: 30,
      offset: 0,
      total: 0,
      more: false,
      // 取上一页最后一个歌单的 updateTime 获取下一页数据
      lasttime: ""
    };
  },
  created() {
    this.getCatList();
  },
  mounted() {
    this.getRecommendList();
  },
  methods: {
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";

      this.$refs.squarewrapRef.style.bottom = bottom;
      this.$refs.squareListRef.refresh();
    },
    async getCatList() {
      const res = await getHotcatList();
      if (res.code !== 200) {
        this.$toast("获取歌单分类失败");
      }
      console.log(res);

      this.tags = this._normalizeTags(res.tags);
    },
    _normalizeTags(list) {
      let ret = [];
      list.forEach(item => {
        if (item.id) {
          let temp = createSquareTag(item);
          ret.push(temp);
        }
      });
      let recommend = createSquareTag({
        id: -1,
        name: "推荐",
        type: -1,
        hot: false
      });
      ret.unshift(recommend);
      return ret;
    },
    switchTag(name) {
      this.currentTagName = name;
    },
    async getRecommendList() {
      const recommendData = await getRecommend();
      console.log(recommendData);

      this.isLoading = false;
      // 旋转木马轮播：
      this.Trojan = recommendData.result.slice(0, 6);
      this.SquareList = recommendData.result.slice(6, recommendData.length);
    },
    seletItem(item) {
      this.$router.push({
        name: "songsheet",
        query: { id: item.id }
      });
      this.setSonngSheet(item);
      this.setSongSheetType("歌单");
    },
    ...mapMutations({
      setSonngSheet: "SET_SONGSHEET",
      setSongSheetType: "SET_SONGSHEET_TYPE"
    }),
    getSquare() {
      getSquareList({
        cat: this.currentTagName,
        limit: this.limit,
        offset: this.offset
      }).then(res => {
        this.lasttime = res.lasttime;
        this.total = res.total;
        this.more = res.more;
        this.SquareList = [...this.SquareList, ...res.playlists];
        this.isLoading = false;
        // let high = this.SquareList.filter(item => item.highQuality);
        // console.log(high);
      });
    },
    loadMoreList() {
      if (!this.more) {
        this.$toast("没有更多了");
        return;
      }
      this.offset += this.limit;
      this.getSquare(this.currentTagName);
    }
  },
  watch: {
    currentTagName(val) {
      if (val === "推荐") {
        this.isLoading = true;
        this.SquareList = [];
        this.getRecommendList();
        return;
      }
      this.isLoading = true;
      this.SquareList = [];
      this.limit = 30;
      this.offset = 0;
      this.total = 0;
      this.getSquare();
    }
  }
};
</script>

<style lang="less" scoped>
.square-wrap {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 66;
  left: 0;
  top: 0;
  background-color: #222;
}
.square-content {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
}
.square-list-wrap {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  bottom: 0;
  top: 100px;
}
.scroll-content {
  height: 100%;
  overflow: hidden;
}
</style>